import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { orderedSections, QuietLine, TODAY_FEED_HREF, TODAY_LABELS, TodayItemRow } from '@/components/changes/today-sections';
import { DataStrip, SectionNav } from '@/components/layout/terminal';
import { BreadcrumbLd } from '@/components/meta/breadcrumb-ld';
import { ImportanceMark } from '@/components/ui/badges';
import { EntityLink } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { Container, Note, PageHeader, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { apiD3, safe } from '@/lib/api';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

type Params = { params: Promise<{ date: string }>; searchParams: Promise<{ include_backfill?: string }> };
const VALID = /^\d{4}-\d{2}-\d{2}$/;

function shift(date: string, days: number): string {
  const d = new Date(`${date}T00:00:00Z`);
  d.setUTCDate(d.getUTCDate() + days);
  return d.toISOString().slice(0, 10);
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { date } = await params;
  if (!VALID.test(date)) return { title: 'Not found', robots: { index: false } };
  const title = `Today in AI — ${fmtDate(date)}`;
  const description = `What happened in AI on ${fmtDate(date)}: major releases, price moves, benchmark moves, model changes, research, open-weight releases, deprecations, provider and hardware changes — generated from the ${SITE_NAME} change log.`;
  return { title, description, alternates: { canonical: routes.changesDay(date) }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${routes.changesDay(date)}`, type: 'article' } };
}

export default async function DailyPage({ params, searchParams }: Params) {
  const { date } = await params;
  const sp = await searchParams;
  if (!VALID.test(date) || Number.isNaN(new Date(`${date}T00:00:00Z`).getTime())) notFound();
  const today = new Date().toISOString().slice(0, 10);
  if (date > today) notFound();
  const backfill = sp.include_backfill === '1';
  const d = await safe(apiD3.changesDaily(date, 30, backfill));
  const { present, quiet } = orderedSections(d?.today);
  const total = num(d?.total) ?? (d ? Object.values(d.counts ?? {}).reduce<number>((n, v) => n + (num(v) ?? 0), 0) : 0);
  const excluded = num(d?.backfill_excluded) ?? 0;
  const prev = d?.previous_day ?? shift(date, -1);
  const next = d?.next_day && d.next_day <= today ? d.next_day : date < today ? shift(date, 1) : null;
  const strip = (d?.today ?? []).filter((s) => (num(s.total) ?? 0) > 0).slice(0, 8);

  return (
    <Container wide>
      <BreadcrumbLd items={[{ name: SITE_NAME, href: '/' }, { name: 'Changes', href: '/changes' }, { name: fmtDate(date), href: routes.changesDay(date) }]} />
      <PageHeader
        eyebrow={
          <>
            <Link href={routes.changes()} className="hover:text-ink">
              Changes
            </Link>
            <span aria-hidden>/</span>
            <span>Today in AI</span>
          </>
        }
        title={
          <>
            What changed in AI on <span className="text-ink-2">{fmtDate(date)}</span>
          </>
        }
        lede={d ? <>{fmtInt(total)} events occurred on this UTC day{d.today ? ` across ${present.length} sections` : ''} — grouped when several documents describe one release, generated from the database, nothing editorial.</> : undefined}
        aside={
          <nav className="flex items-center gap-2 text-sm" aria-label="Day navigation">
            <Link href={routes.changesDay(prev)} className="inline-flex h-10 items-center border border-rule px-3 text-ink-2 hover:text-ink" rel="prev">
              ‹ {fmtDate(prev)}
            </Link>
            {next && (
              <Link href={routes.changesDay(next)} className="inline-flex h-10 items-center border border-rule px-3 text-ink-2 hover:text-ink" rel="next">
                {fmtDate(next)} ›
              </Link>
            )}
            {date !== today && (
              <Link href={routes.changesDay(today)} className="inline-flex h-10 items-center px-2 text-accent hover:underline">
                today
              </Link>
            )}
          </nav>
        }
      />
      <div className="pb-16">
        {!d ? (
          <Unavailable what="Daily digest" />
        ) : total === 0 && !d.new_models?.length && present.length === 0 ? (
          <EmptyState title="Nothing occurred on this day">
            {excluded > 0 ? (
              <>
                {fmtInt(excluded)} back-filled historical events fall on this date but are not “today” news — see them on the <Link href={`/timeline?year=${date.slice(0, 4)}&include_backfill=1`} className="link">timeline with backfill</Link> or <Link href={`${routes.changesDay(date)}?include_backfill=1`} className="link">include them here</Link>.
              </>
            ) : (
              'Connectors observed no material change occurring on this UTC day.'
            )}
          </EmptyState>
        ) : (
          <>
            {strip.length > 0 && <DataStrip dense items={strip.map((s) => ({ label: s.label ?? TODAY_LABELS[s.key] ?? s.key, value: fmtInt(s.total), href: `#${s.key.toLowerCase()}` }))} />}
            <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-3">
              <span className="inline-flex items-center gap-1">
                Dates are when events <em>occurred</em>
                <Hint align="right" text="occurred_at = effective date when a source states one, else the observation time. Hover any date in the list for the observation time. `today` folds events sharing a group_key (one release seen in several documents) into one row." />
              </span>
              {excluded > 0 && (
                <span data-backfill-excluded>
                  {fmtInt(excluded)} back-filled historical {excluded === 1 ? 'event' : 'events'} excluded ·{' '}
                  <Link href={`/timeline?year=${date.slice(0, 4)}&include_backfill=1`} className="link">
                    see them on the timeline
                  </Link>{' '}
                  ·{' '}
                  <Link href={`${routes.changesDay(date)}${backfill ? '' : '?include_backfill=1'}`} className="link">
                    {backfill ? 'hide backfill' : 'include here'}
                  </Link>
                </span>
              )}
              {backfill && <span className="rounded-[3px] bg-surface-2 px-1.5 text-[10px] uppercase tracking-wide">including backfill</span>}
            </p>
            {present.length > 1 && <SectionNav items={present.map((s) => ({ id: s.key.toLowerCase(), label: s.label ?? TODAY_LABELS[s.key] ?? s.key }))} className="mt-3" />}

            {d.new_models?.length > 0 && (
              <Section eyebrow="New models" title={<>{fmtInt(d.new_models.length)} new model{d.new_models.length === 1 ? '' : 's'}</>} hairline={false} action={{ href: `/models?year_from=${date.slice(0, 4)}&sort=release`, label: 'Models by release' }}>
                <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
                  {d.new_models.slice(0, 30).map((m) => (
                    <li key={m.id} className="flex items-baseline justify-between gap-3 border-b border-rule py-2 text-sm">
                      <EntityLink e={m} className="font-medium" />
                      <span className="shrink-0 text-xs text-ink-3">{m.organization?.name ?? ''}</span>
                    </li>
                  ))}
                </ul>
                {d.new_models.length > 30 && <Note className="mt-2">First 30 of {fmtInt(d.new_models.length)}.</Note>}
              </Section>
            )}

            {present.map((s) => {
              const shown = s.items.length;
              const tot = num(s.total) ?? shown;
              const feed = TODAY_FEED_HREF[s.key]?.(date);
              return (
                <Section key={s.key} id={s.key.toLowerCase()} eyebrow={s.label ?? TODAY_LABELS[s.key] ?? s.key} title={<>{s.label ?? TODAY_LABELS[s.key] ?? s.key} <span className="tnum text-base font-normal text-ink-3">{fmtInt(tot)}</span></>} action={feed ? { href: feed, label: 'Feed' } : undefined}>
                  <ul className="border-t border-rule">
                    {s.items.map((it) => (
                      <TodayItemRow key={it.id} it={it} />
                    ))}
                  </ul>
                  {tot > shown && <Note className="mt-2">First {fmtInt(shown)} of {fmtInt(tot)}{feed ? <> — <Link href={feed} className="link">all in the feed →</Link></> : null}</Note>}
                  {s.items.some((it) => it.importance >= 3) && (
                    <p className="mt-2 flex items-center gap-1.5 text-[11px] text-ink-3">
                      <ImportanceMark importance={3} /> major · <ImportanceMark importance={2} /> important · <ImportanceMark importance={1} /> notable
                    </p>
                  )}
                </Section>
              );
            })}
            <QuietLine quiet={quiet} labels={d.labels} />
            {d.note && <Note className="mt-4">{d.note}</Note>}
          </>
        )}
      </div>
    </Container>
  );
}